<template>
	<view v-if="goodsInfo" class="goods-info">

		<!-- 商品卡片区域 -->
		<blockquote>
			<goods-card ref="goods_card_ref" :goodsInfo="goodsInfo"></goods-card>
		</blockquote>

		<blockquote>
			<!-- content区域 -->
			<uni-section title="详细介绍" type="circle" class="line">
			</uni-section>
			<u-parse className="content" :content="goodsInfo.content" noData="这个宝贝暂无过多描述!" :imageProp="imageConfig">
			</u-parse>
		</blockquote>
		<!-- 商品卡片区域 -->
		<blockquote>
			<goods-card ref="goods_card_ref" :goodsInfo="goodsInfo"></goods-card>
		</blockquote>
		<blockquote>

			<!-- 商品详情的末尾 -->
			<load-more status="noMore"></load-more>
		</blockquote>


		<blockquote>
			<!-- 自己写的弹窗，这个就意味着用户有权获取资源你 -->
			<disk-info-popup :diskInfo="diskInfo" ref="disk-info-popup"></disk-info-popup>
		</blockquote>




		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="好的" confirmText="明天再来" title="温馨提示"
					@confirm="dialogConfirmByDiskLimit" @close="dialogCloseByDiskLimit">
					<template>
						<view class="disk-limit-slot">
							<text>您的下载次数超过了设定的数值!</text>
						</view>
					</template>
				</uni-popup-dialog>
			</uni-popup>

		</view>
		<view>
			<!-- 分享示例 -->
			<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
				<uni-popup-share title="分享到">
				</uni-popup-share>
			</uni-popup>
		</view>
	</view>
	<view v-else>
		<image src="../../static/images/notfound.png" mode="scaleToFill"></image>
		<navigator url="../../pages/home/home" open-type="navigateBack" delta="1">
			<button>返回</button>
		</navigator>
	</view>
</template>
<script>
	import simpleCache from '../../utils/Simple-Cache';
	export default {
		onLoad() {
			//从父页面勾数据，思路 ： 哪个页面想要获得数据就在哪个页面的初始化阶段的 eventChannel 添加一个监听器 例如 ：eventChannel.on('getGoodsItemInfo', this.getGoodsItemInfo)

			try {
				// 寻求快速编译 直接从服务器请求内容 所以
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.on('getGoodsItemInfo', this.getGoodsItemInfo)
			} catch (e) {
				//TODO handle the exception
			}

		},
		data() {
			return {
				msgType: 'error',
				imageConfig: {
					lazyLoad: true,
					padding: 10
				},
				goodsInfo: null,
				diskInfo: null,
				diskPopUpIsShow: false
			}
		},
		mounted() {
			//快速开发 // 寻求快速编译 会有各种各样的bug 不要了 直接从服务器请求内容 所以使用后台请求的数据  end
			//在详情页赋值商品对象时也给子组件卡片来一份
			uni.$on('getDiskInfo', this.getDiskInfo)
			uni.$on('getDiskPopUpIsShow', function(e) {
				this.diskPopUpIsShow = e.show
			})
		},
		methods: {
			getGoodsItemInfo(goodsInfo) {
				//用于父子页面通讯 const eventChannel = this.getOpenerEventChannel();  onload Hook
				this.goodsInfo = goodsInfo
			},
			getDiskInfo(diskObject) {
				this.diskInfo = diskObject
				this.openDiskPopUp()
			},
			openDiskPopUp() {
				let downCount = simpleCache.get('downcount')
				//若统计到下载次数 就展示限制下载弹窗
				if (downCount > 0) return this.dialogToggleByDiskLimit('error')
				this.$nextTick(() => {
					this.$refs['disk-info-popup'].toggle('center')
				})
			},
			dialogToggleByDiskLimit(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirmByDiskLimit() {
				console.log('点击确认')
				return;
				this.shareToggle()
			},
			dialogCloseByDiskLimit() {
				console.log('点击关闭')
			},
			shareToggle() {
				this.$refs.share.open()
			},

		}
	}
</script>

<style lang="less">
	.uni-section {
		background-color: #b5b5b5;
		border-bottom: 2px solid #f40;
	}

	.goods-info {
		font-size: 36rpx;

		.content {
			margin: 20rpx 10rpx;
			line-height: 2rem;
			letter-spacing: .5rem;

			.h1 {
				font-size: 1.5rem;
				text-align: center;
				font-weight: 900;
				color: black;
			}

			.p {
				text-indent: 2rem;
			}

			weixin-parse-img {
				display: flex;
				justify-content: center;

				.img {
					width: 90%;
					max-height: 600rpx;
					border-radius: 20rpx;
					margin: 20rpx;
				}
			}
		}
	}
</style>
